<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>床位示意图</span>
				
			</div>

			<div>
				<span style="">楼层：</span>
				<el-select v-model="floorvalue" class="RightMargin" placeholder="可选条件" style="width: 100px;" v-on:change="chooseFloor(floorvalue)">
					<el-option key="1" label="一楼" value="1" name="floor" />
					<el-option key="2" label="二楼" value="2" name="floor" />
					<el-option key="3" label="三楼" value="3" name="floor" />
					<el-option key="4" label="四楼" value="4" name="floor" />
					<el-option key="5" label="五楼" value="5" name="floor" />
				</el-select>
				<img src="../../assets/床位.png" style="width: 20px;height: 20px;" />
				<span>床位数:{{ AllCount }}</span>
				<img src="../../assets/床位空闲.png" style="width: 20px;height: 20px;" />
				<span>空闲:{{ FreeCount }}</span>
				<img src="../../assets/床位有人.png" style="width: 20px;height: 20px;" />
				<span>有人:{{ ExCount }}</span>
				<img src="../../assets/床位外出.png" style="width: 20px;height: 20px;" />
				<span>外出:{{ leftCount }}</span>
			</div>

			<div style="box-shadow: 10px 10px 5px #888888; text-align:  center;">
				<form class="playfrom">
					<div class="fader" v-for="value in bed" >
						<div class="child" v-if="value.bedStatus === '空闲'">
							<img class="childImg" src="../../assets/床位空闲.png"  @click="bedinfo(value)"/>
							<br />
							<span>{{ value.bedInfo }}</span>
						</div>
						<div class="child" v-else-if="value.bedStatus === '有人'">
							<img class="childImg" src="../../assets/床位有人.png"   @click="bedinfo(value)" />
							<br />
							<span>{{ value.bedInfo }}</span>
						</div>
						<div class="child" v-else-if="value.bedStatus === '外出'" >
							<img class="childImg" src="../../assets/床位外出.png"  @click="bedinfo(value)" />
							<br />
							<span>{{ value.bedInfo }}</span>
						</div>
					</div>
				</form>
			</div>
		</el-card>
		
		<el-dialog :title="title" :visible.sync="show">
			
			<bedinfo :show.sync="show" :bedvalue='bedvalue'  :editid="editid" :key="showNum"></bedinfo>
			
		</el-dialog>
		
		
	</div>
</template>
<script>
	import bedinfo from './bedinfo.vue'
import axios from '@/utils/axiosutils.js';
export default {
	name: 'StaffAdd',
	components: {bedinfo},
	data() {
		return {
			bed: [],
			pages: 0,
			floorvalue: '',
			value: '',
			AllCount: 0,
			ExCount: 0,
			leftCount: 0,
			FreeCount: 0,
			condition: '',
			showNum: 0,
			show: false,
			editid:null,
			bedvalue:'',
			title: ''
		};
	},
	created() {
		this.count();
		this.list();
	},
	methods: {
		list() {
			axios.get('/bed/data', response => {
				console.log(response)
				this.bed = response.obj;
			});
		},
		count() {
			axios.get('/bed/count', response => {
				this.leftCount = response.obj[2].count;
				this.ExCount = response.obj[1].count;
				this.FreeCount = response.obj[0].count;
				this.AllCount = this.leftCount + this.ExCount + this.FreeCount;
			});
		},
		chooseFloor(floor) {
			
			axios.get(
			'/bed/floor',
			 resp => {
				this.bed=resp.obj;
			},
			{id:  floor}
			);
		},
		bedinfo(value){
			this.showNum++;
			  this.title = '床位信息'
			  this.bedvalue=value;
			  this.show = true
			console.log(value)
		}
	}
};
</script>
<style scoped>
.t1 td {
	color: aliceblue;
}
img {
	width: 60px;
	height: 40px;
}
a {
	color: #ff55ff;
	cursor: pointer;
}

.child {
	border: #b5b5b5 solid 1px;
	width: 80px;
	height: 70px;
}
.fader{
	display: inline-block;

}
</style>
